/* eslint-disable @typescript-eslint/no-unused-expressions */
import React, { useState } from "react"
import { Image } from 'antd';
import type { MenuProps } from 'antd';
import { Breadcrumb, Layout, Menu } from 'antd';
import { NavLink, Outlet } from "react-router-dom";
import { homerouter } from "../../router";

const { Header, Content, Footer, Sider } = Layout;
const Index = () => {
  type MenuItem = Required<MenuProps>['items'][number];

  function getItem(
    label: React.ReactNode,
    key: React.Key,
    icon?: React.ReactNode,
    children?: MenuItem[],
  ): MenuItem {
    return {
      key,
      icon,
      children,
      label,
    } as MenuItem;
  }
  const xr = (add) => {
    const items= [];
    add && add.forEach((item) => {
      if (item.children) {
        items.push(getItem(<NavLink to={item.path}>{item.title}</NavLink>, item.path, item.Icon,xr(item.children)))
      }
      else {
        items.push(getItem(<NavLink to={item.path}>{item.title}</NavLink>, item.path, item.Icon))
      }

    })
    return items
  }
  const items = xr(homerouter)
  const [collapsed, setCollapsed] = useState(false);

  return (
    <div>
      <Layout style={{ minHeight: '100vh' }}>

        <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
          <div style={{ color: '#fff', textAlign: 'center' }}><Image
            width={60}
            src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
          /></div>
          <div className="demo-logo-vertical" />
          <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline" items={items} />
        </Sider>
        <Layout>
          <Header style={{ padding: 0, background: 'colorBgContainer' }} />
          <Content style={{ margin: '0 16px' }}>
        
            <div
              style={{
                padding: 24,
                minHeight: 360,
                background: 'colorBgContainer',
                borderRadius: 'borderRadiusLG',
              }}
            >
              <Outlet></Outlet>
            </div>
          </Content>
          <Footer style={{ textAlign: 'center' }}>
            Ant Design ©{new Date().getFullYear()} Created by Ant UED
          </Footer>
        </Layout>
      </Layout>
    </div>
  )
}

export default Index
